<template>
    <form @submit.prevent="login">
        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input v-model="username" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input v-model="password" type="password" class="form-control" id="exampleInputPassword1">
        </div>
        <div class="error-message" style="color: red;">{{ error_message }}</div>
        <div><button type="submit" style="flex: auto;margin-top: 10px; width:100%" class="btn btn-primary">登录</button></div>
    </form>
</template>

<script>


import { ref } from 'vue';
import router from '@/router';
import { useStore } from 'vuex';
export default {
    setup() {
        const store = useStore();
        let username = ref('');
        let password = ref('');
        let error_message = ref('');
        const login = () => {
            error_message.value = ''
            store.dispatch("login", {
                username: username.value,
                password: password.value,
                success(resp) {

                    router.push({ name: 'HomeView' });
                    console.log(store.state.user);

                    console.log("success", resp.token)

                },
                error(resp) {
                    error_message.value = '用户名或密码错误'
                    console.log(resp)
                }
            })
        }

        return {
            username,
            password,
            error_message,
            login,

        }

    }
}
</script>

<style scoped></style>